<template>


      <div class="app-container" style="width: 100vw;display: flex;justify-content: center;padding-top: 20px">
        <div style="height: 50vh; width: 25vw; background-color: white; display: flex; justify-content: center; align-items: center; padding-top: 0; margin-right: 50px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="头像" prop="userPic">
              <imageUpload limit="1" v-model="form.userPic" />
            </el-form-item>
            <el-form-item label="姓名" prop="userNickname">
              <el-input v-model="form.userNickname" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="账号" prop="userAge">
              <el-input v-model="form.userAccount" placeholder="请输入年龄" :readonly="true" />
            </el-form-item>
          </el-form>
        </div>




        <div style=" width: 40vw;height: 60vh; background-color: white; display: flex; justify-content: center; padding-top: 30px;  margin-right: 50px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="width: 50%">



            <el-form-item label="年龄" prop="userAge">
              <el-input v-model="form.userAge" placeholder="请输入年龄"/>
            </el-form-item>
            <el-form-item label="性别" prop="userSex">
              <el-select v-model="form.userSex" placeholder="请选择性别">
                <el-option label="男" value="男"/>
                <el-option label="女" value="女"/>
              </el-select>
            </el-form-item>
            <el-form-item label="身份证" prop="userIdcard">
              <el-input v-model="form.userIdcard" placeholder="请输入身份证"/>
            </el-form-item>
            <el-form-item label="邮箱" prop="userEmail">
              <el-input v-model="form.userEmail" placeholder="请输入邮箱"/>
            </el-form-item>
            <el-form-item label="爱好" prop="userLove">
              <el-input v-model="form.userLove" placeholder="请输入爱好"/>
            </el-form-item>
            <el-form-item label="个性签名" prop="userSingle">
              <el-input v-model="form.userSingle" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
              <el-input v-model="form.userPhone" placeholder="请输入手机号"/>
            </el-form-item>


            <el-form-item label="地址" prop="userPhone">
              <el-input v-model="form.userAddr" placeholder="请输入地址"/>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="submitForm" style="width: 100%">修 改</el-button>

            </el-form-item>









          </el-form>


        </div>

      </div>







</template>

<script>
import {listUser, getUser, delUser, addUser, updateUser} from "@/api/project/user";

export default {
  name: "User",
  data() {

    var iseamil = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的邮箱"));
        } else {
          callback();
        }
      }
    };
    var isidcard = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的身份证"));
        } else {
          callback();
        }
      }
    };
    var isphone = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg =  /^1[34578]\d{9}$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    };
    var isage = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg =  /^((1[0-5])|[1-9])?\d$/;
        const is = reg.test(value);
        if (!is ) {
          callback(new Error("请输入正确的年龄"));
        } else {
          callback();
        }
      }
    };

    return {
      loading: true,
      // 总条数
      total: 0,
      // 用户管理表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userAccount: null,
        userPassword: null,
        userPermissions: "普通用户",
        userPic: null,
        userNickname: null,
        userAge: null,
        userSex: null,
        userIdcard: null,
        userEmail: null,
        userLove: null,
        userSingle: null,
        userPhone: null,


      },
      // 表单参数
      form: {},
      userInfo: {},
      // 表单校验
      rules: {
        userAccount: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPassword: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPic: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userNickname: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userAge: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: isage, trigger: "blur" }
        ],
        userSex: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userIdcard: [
          {required: true, message: "不能为空", trigger: "blur"}
          ,
          { validator: isidcard, trigger: "blur" }
        ],
        userEmail: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: iseamil, trigger: "blur" }
        ],
        userLove: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],
        userPhone: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: isphone, trigger: "blur" }
        ],
        userAddr: [
          {required: true, message: "不能为空", trigger: "blur"},
          { validator: isphone, trigger: "blur" }
        ],


        userSingle: [
          {required: true, message: "不能为空", trigger: "blur"}
        ],


      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handlePageChange(currentPage) {
      this.queryParams.pageNum = currentPage
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    /** 查询用户管理列表 */
    getList() {
      this.userInfo=JSON.parse(localStorage.getItem("userInfo"))


      getUser({
        id:this.userInfo.id
      }).then(response => {
       this.form=response.data
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userAccount: null,
        userPassword: null,
        userPermissions: "普通用户",
        userPic: null,
        userNickname: null,
        userAge: null,
        userSex: null,
        userIdcard: null,
        userEmail: null,
        userLove: null,
        userSingle: null,
        userPhone: null,


      };
      // this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getUser(row).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改用户管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateUser(this.form).then(response => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then(response => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除？').then(function () {
        return delUser(row);
      }).then(() => {
        this.getList();
        this.$message.success("删除成功");
      }).catch(() => {
      });
    },
  }
};
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.card-item {
  width: 15vw;
  margin-left: 1vw;
  margin-bottom: 20px; /* 行间距 */
}

.card-item:nth-child(5n+1) {
  margin-left: 0; /* 每行第一个项目移除左边距 */
}

.back{

  background-size: cover;
}

.app-container{

  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  display: flex;
  height: calc(100vh - 120px)





}
</style>